<template>
  <div class="formShow">
    <div class="card-search card">
      <el-form
        :inline="true"
        :model="formDevelopSearch"
        key="1"
        class="demo-form-inline"
      >
        <el-form-item label="表单类型">
          <!-- v-model="formInline.types"绑的是value -->
          <el-select
            v-model="formDevelopSearch.types"
            clearable
            @change="selectChange"
          >
            <el-option
              v-for="item in formDevelopSearch.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="表单名称">
          <el-input v-model="formDevelopSearch.name"></el-input>
        </el-form-item>
        <el-form-item label="选择时间">
          <el-date-picker
            v-model="formDevelopSearch.time"
            @change="timeChange"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTableData">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="card card-table">
      <div class="btn">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="medium"
          @click="openForm"
          >新增</el-button
        >
      </div>
      <div>
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="getRowClass"
          :row-style="{ fontSize: '14px', height: '10px' }"
          :cell-style="{ padding: '14px', height: '30px' }"
        >
          >
          <el-table-column label="创建时间" width="120">
            <template slot-scope="{ row }">
              <div>
                {{ row.createTime ? row.createTime : "-" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            v-for="(item, index) in tableData[0].data"
            :key="index"
            width="120"
          >
            <template slot="header">
              <div>
                {{ item.title }}
              </div>
            </template>
            <template slot-scope="{ row }">
              <div>
                {{ row.data[index].value ? row.data[index].value : "-" }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div
        v-if="tableData.length !== 0"
        class="pagina"
        style="display: flex; flex-direction: row-reverse; margin-top: 10px"
      >
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total_count"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <form-drawer
      :visible.sync="drawerVisible"
      :form-data="formData"
      size="100%"
      :generate-conf="generateConf"
    />
  </div>
</template>

<script>
import {
  formGet,
  formTypeGetTypeName,
  formTypeGetById,
} from "../../../api/dataCenter";
import FormDrawer from "../formType/FormDrawer.vue";
export default {
  components: {
    FormDrawer,
  },
  data() {
    return {
      formDevelopSearch: {
        types: "",
        formName: "",
        time: "",
        options: [],
      },
      formData: {},
      drawerVisible: false,
      generateConf: {
        fileName: undefined,
        type: "dialog",
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total_count: 1,
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getSelectData();
  },
  methods: {
    async getSelectData() {
      const { data } = await formTypeGetTypeName();
      if (data.code === 200) {
        let key = Object.keys(data.data);
        let value = Object.values(data.data);
        for (let i = 0; i < key.length; i++) {
          this.formDevelopSearch.options.push({
            label: key[i],
            value: value[i],
          });
        }
        this.formDevelopSearch.types = value[0];
      }
      this.getTableData();
    },
    async getTableData() {
      const params = {
        currPage: this.currentPage,
        pageSize: this.pageSize,
        typeId: this.formDevelopSearch.types,
        startTime: this.formDevelopSearch.time[0],
        endTime: this.formDevelopSearch.time[1],
        name: this.formDevelopSearch.name,
      };
      const { data } = await formGet(params);
      if (data.code === 200) {
        this.total_count = data.data.count;
        this.tableData = data.data.data;
        console.log(this.tableData);
      }
    },
    async openForm() {
      sessionStorage.setItem("typeId", this.formDevelopSearch.types);
      const params = {
        typeId: sessionStorage.getItem("typeId"),
      };
      const { data } = await formTypeGetById(params);
      if (data.code === 200) {
        this.formData = data.data.module;
        this.drawerVisible = true;
      }
    },
    timeChange() {
      console.log(this.formDevelopSearch.time);
    },
    selectChange() {
      console.log(this.formDevelopSearch.types);
    },
    // 表格头部样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #f7fbff;color:black;padding: 15px";
      } else {
        return "";
      }
    },
    // 分页
    handleSizeChange(value) {
      console.log("每页展示" + value + "条");
      // this.apiLoading = true
      this.pageSize = value;
      this.getTableData();
    },

    handleCurrentChange(value) {
      // 改变页数
      console.log("第" + value + "页");
      // this.apiLoading = true
      this.currentPage = value;
      this.getTableData();
    },
  },
};
</script>

<style scoped>
.formShow {
  width: 100%;
  height: 100%;
}

.card {
  border-radius: 2px;
  background-color: #fff;
}

.btn {
  margin-bottom: 15px;
  width: 200px;
}
</style>
